<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .list-wrapper {
      width: 230px;
      height: 100px;
      border: 1px solid pink;
      margin: 10px auto;
      position: relative;
      overflow-y: scroll;
    }

    .scroll-bar {
      width: 100%;
    }

    .data-box {
      position: absolute;
      left: 0;
      top: 0;

    }

    .list-item {
      width: 100px;
      height: 20px;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div id='app'>
    <div class="list-wrapper" ref="listWrapper" @scroll="onScroll">
      <div class="scroll-bar" :style="{height:listData.length*itemHeight+'px'}"></div>
      <div class="data-box" :style="{transform:getTransform}">
        <div class="list-item" v-for="item in showData">{{item}}</div>
      </div>
    </div>
  </div>
  <script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        itemHeight: 20,
        listWrapperHeight: 100,
        startIndex: 0,
        startOffset: 0
      },
      computed: {
        showCount() {
          return Math.ceil(this.listWrapperHeight / this.itemHeight)
        },
        endIndex() {
          return this.startIndex + this.showCount
        },
        showData() {
          return this.listData.slice(this.startIndex, this.endIndex)
        },
        // getTransform(){
        //  return {transform:`translateY(${this.startOffset})px`}
        // }
        //偏移量对应的style
        getTransform() {
          return `translate3d(0,${this.startOffset}px,0)`;
        },

      },
      methods: {
        onScroll(e) {
          let scrollTop = this.$refs.listWrapper.scrollTop

          let scrollCount =Math.floor(scrollTop / this.itemHeight)
          this.startIndex = scrollCount
          console.log('scrollTop---', scrollTop)
          // this.$refs.list.style.transform=`translateY(${this.scrollTop}px);`
          // this.startOffset =this.startIndex *this.itemHeight
           console.log('取模---',scrollTop % this.itemHeight)
           console.log('1计算的偏移值',scrollTop-(scrollTop % this.itemHeight))
          this.startOffset =this.startIndex *this.itemHeight
            console.log('2计算的偏移值',this.startIndex *this.itemHeight)
        }
      }

    })
  </script>
</body>

</html>